<template>
  <!-- <div class="thought-clps" v-if="showThoughtClps"> -->
  <div
    :class="isOpen ? 'thought-clps' : 'thought-clps thought-clps-open'"
    v-if="showThoughtClps"
    :style="{
      'max-width': webIMSource === 'client' && isMobile ? '352px' : '100%',
    }"
  >
    <v-popper ref="littleTagPop" clazz="pop-demo" :use-arrow="true">
      <div class="pop-demo-list" v-for="pop in popperList" :key="pop.id">
        <!-- <a :href="pop.url" target="_blank">{{pop.id + '.' + pop.name }} ></a> -->
        <v-button
          type="link"
          kind="primary"
          v-blank
          @click="openSearchUrl(pop, pop.id)"
        >
          <!-- {{pop.id + '.' + pop.name }} -->
          {{ pop.id }}.{{
            isMobile
              ? formattedEllipsis(pop.title, 15)
              : formattedEllipsis(pop.title)
          }}
          <v-icon remote name="arrow_right_line" size="12" valign="-1"></v-icon>
        </v-button>
      </div>
    </v-popper>
    <div class="thought-clps-title" @click="toggleCollapse">
      <!-- <template v-if="answerAgentName">
              <span >{{`{ ${answerAgentName} }Agent`}}</span>
          </template> -->
      <!-- <img  v-if="agentThought.is_workflow" class="logo-split" src="@/assets/img/thought-workflow.svg" alt="split" /> -->
      <span v-if="agentThought.is_workflow">{{
        `{ ${agentThought.workflow_name} }工作流`
      }}</span>
      <span class="thought-clps-title-desc">{{
        !isOpen ? "展开思考过程" : "收起思考过程"
      }}</span>
      <v-icon
        :remote="true"
        name="arrow_down_small_line"
        size="12"
        class="tokens-bd__header__icon"
        :rotate="isOpen ? 180 : 0"
      ></v-icon>
    </div>
    <div class="thought-clps-content" v-show="isOpen">
      <div v-for="(item, idx) in agentThought.procedures" :key="item.index">
        <div
          v-if="!enableWorkSpaceTitle"
          class="thought-title"
          @click="openRunNodes(item)"
        >
          <div class="thought-title-container">
            <img
              :class="`thought-title-icon ${
                item.agent_icon ? 'agent-title-icon' : ''
              }`"
              :src="item.agent_icon || item.icon"
            />
            <span class="thought-title-name"
              >{{ item.title
              }}<span class="thought-clps-modellabel" v-if="item.node_name"
                >-{{ item.node_name }}</span
              ></span
            >
            <span class="thought-title-elapsed"
              >（{{ item.elapsed ? item.elapsed / 1000 : 0 }}s）</span
            >
            <!-- 进行中不展示icon -->
            <!-- <v-spinner v-if="ele.status === THOUGHT_STATUS.pending" status="default"></v-spinner> -->
            <!-- 失败 -->
            <v-icon
              v-if="item.status === THOUGHT_STATUS.failed"
              name="basic_warning_line"
              style="color: #ff8345"
              remote
              size="16"
            />
            <!-- 成功 -->
            <!-- <v-icon v-if="item.status === THOUGHT_STATUS.success" name="basic_finish_line" style="color: #0FB87F" remote size="16" /> -->
            <!-- 停止 -->
            <v-icon
              v-if="item.status === THOUGHT_STATUS.stop"
              name="basic_stop_line"
              style="color: var(--color-text-caption)"
              remote
              size="16"
            />
            <v-icon
              v-if="item.status === THOUGHT_STATUS.error"
              name="basic_error_line"
              style="color: #f75559"
              remote
              size="16"
            />
          </div>
          <!-- <div class="thought-title-container"> -->
          <!-- <v-icon :remote="true" name="arrow_down_small_line" size="12" class="thought__header__icon"
                          :rotate="isOpenDtl[item.index] ? 180 : 0"></v-icon> -->
          <!-- <span class="thought-title-elapsed">（{{ item.elapsed ? item.elapsed / 1000 : 0 }}s）</span>s -->
          <!-- </div> -->
        </div>
        <div
          v-else-if="!item.hidden_agent_icon"
          class="thought-title thought-new-title"
          @click="openRunNodes(item)"
        >
          <div
            :class="`thought-title-container ${
              item.name === 'KnowledgeRetrievalAnswer' ? 'disabled' : ''
            } ${
              item.target_agent_name
                ? 'thought-agent-container'
                : 'thought-tool-container'
            }`"
            @click="onTriggerWorkSpace(item, idx)"
          >
            <div
              :class="`thought-tool-inner ${
                workspaceVisible ? 'workspace-active' : ''
              }`"
            >
              <img
                :class="`thought-title-icon ${
                  item.agent_icon ? 'agent-title-icon' : ''
                }`"
                :src="item.agent_icon || item.icon"
              />
              <span class="thought-agent-name">{{
                item.target_agent_name
              }}</span>
              <span
                class="thought-title-name"
                :title="item.debugging.display_status"
                >{{ item.debugging.display_status }}</span
              >
              <span class="thought-line">|</span>
              <span class="thought-title-elapsed">
                <span>（</span
                >{{ item.elapsed ? item.elapsed / 1000 : 0 }}s<span>）</span>
              </span>
              <v-spinner
                style="margin-left: 4px"
                v-if="item.status === THOUGHT_STATUS.processing"
                status="default"
              ></v-spinner>
              <v-icon
                v-if="item.status === THOUGHT_STATUS.failed"
                name="basic_warning_line"
                style="color: #ff8345"
                remote
                size="16"
              />
              <v-icon
                v-if="item.status === THOUGHT_STATUS.stop"
                name="basic_stop_line"
                style="color: var(--color-text-caption)"
                remote
                size="16"
              />
              <v-icon
                v-if="item.status === THOUGHT_STATUS.error"
                name="basic_error_line"
                style="color: #f75559"
                remote
                size="16"
              />
            </div>
          </div>
        </div>
        <div
          :class="[
            'thought-detail',
            { 'last-item': idx === agentThought.procedures.length - 1 },
          ]"
          v-if="isOpenDtl[item.index]"
        >
          <!-- 区分展示思考过程内容
                  1.name === thought 按照md展示
                  2.除了name === thought 以外 display_type === 1 && status === success 用参考来源
                  3.除了name === thought 以外 status === success 用json
                  其他使用md -->
          <div v-if="item.show_type === 'md'">
            <MsgContent
              v-if="!isDeepSeekApp"
              :showTags="false"
              :recordId="item.name + item.index"
              :isReplaceLinks="true"
              :loadingMessage="false"
              :content="item.debugging.content"
              :isMdExpand="true"
              :clazzMd="`question-text ${
                webIMSource === 'client' && isMobile
                  ? 'question-text-mobile'
                  : ''
              }`"
              :styleObj="{
                'max-width':
                  webIMSource === 'client' && isMobile ? '352px' : '100%',
              }"
            />
            <div
              v-else
              :class="`question-text ${
                webIMSource === 'client' && isMobile
                  ? 'question-text-mobile'
                  : ''
              }`"
              :style="{
                'max-width':
                  webIMSource === 'client' && isMobile ? '352px' : '100%',
              }"
              v-html="
                xssHandlerProcess(
                  item.debugging.content
                    .replace(/^\n+/, '')
                    .replace(/\n/g, '<br>')
                )
              "
            ></div>
            <!-- <MsgContent @imageClick="imageClick" @littleTagClick="littleTagClick" :showTags="true" :recordId = "item.record_id" :isReplaceLinks="true" :loadingMessage="item.loading_message" :content="item.content" :isFinal="item.is_final" :isMdExpand="true" :clazzMd="`question-text ${webIMSource === 'client' && isMobile ? 'question-text-mobile' : ''}`" :styleObj="{ 'max-width': webIMSource === 'client' && isMobile ? '352px' : '680px' }" /> -->
          </div>
          <div
            v-if="
              item.show_type === 'search-reference' ||
              item.show_type === 'knowledge-reference'
            "
          >
            <!-- <MsgContent :showTags="false" :recordId = "item.name + item.index" :isReplaceLinks="true" :loadingMessage="false" :content="item.debugging.content" :isMdExpand="true" :clazzMd="`question-text ${webIMSource === 'client' && isMobile ? 'question-text-mobile' : ''}`" :styleObj="{ 'max-width': webIMSource === 'client' && isMobile ? '352px' : '680px' }" /> -->
            <MsgContent
              :showTags="false"
              :recordId="item.name + '@thought@' + item.index"
              :isReplaceLinks="true"
              :loadingMessage="false"
              :content="item.display_thought"
              :isFinal="true"
              :isMdExpand="true"
              :clazzMd="`question-text ${
                webIMSource === 'client' && isMobile
                  ? 'question-text-mobile'
                  : ''
              }`"
              :styleObj="{
                'max-width':
                  webIMSource === 'client' && isMobile ? '352px' : '100%',
                color: 'var(--color-text-caption)',
              }"
            />
            <MsgContent
              @littleTagClick="littleTagClick"
              :showTags="true"
              :recordId="item.name + '@@' + item.index"
              :isReplaceLinks="true"
              :loadingMessage="false"
              :content="item.display_content"
              :isFinal="true"
              :isMdExpand="true"
              :clazzMd="`question-text ${
                webIMSource === 'client' && isMobile
                  ? 'question-text-mobile'
                  : ''
              }`"
              :styleObj="{
                'max-width':
                  webIMSource === 'client' && isMobile ? '352px' : '100%',
              }"
            />
            <Reference
              style="margin-top: 8px"
              :showReferDescTitle="true"
              :references-list="item.debugging.references"
              @openBottomDrawer="openBottomDrawer"
            />
          </div>
          <div v-if="item.show_type === 'json'" style="width: 100%">
            <vue-json-pretty
              v-if="
                !isEmpty(item.debugging.content) &&
                isJSON(item.debugging.content)
              "
              showIcon="true"
              :data="JSON.parse(item.debugging.content)"
            ></vue-json-pretty>
            <div v-else>
              <!-- 兜底处理不是json的状况 -->
              <MsgContent
                :showTags="false"
                :recordId="item.name + item.index"
                :isReplaceLinks="true"
                :loadingMessage="false"
                :content="item.debugging.content"
                :isMdExpand="true"
                :clazzMd="`question-text ${
                  webIMSource === 'client' && isMobile
                    ? 'question-text-mobile'
                    : ''
                }`"
                :styleObj="{
                  'max-width':
                    webIMSource === 'client' && isMobile ? '352px' : '100%',
                }"
                :codeHeaderRender="codeHeaderRender"
              />
            </div>
          </div>
        </div>
        <!-- 展示转接部分 switch 取值为 workflow或者main -->
        <!-- 1. main Agent->workflow
                  [Agent转交对话] {同程开发票}工作流 接管当前对话
                  2. workflow->main Agent
                  [{同程开发票}工作流转交对话] Agent 接管当前对话 -->
        <!-- <div class="thought-tips" v-if="item.switch === 'workflow'">
                  <div class="thought-tips-workflow">
                      [Agent转交对话] {{`{ ${item.workflow_name} }`}} 工作流接管当前对话
                  </div>
              </div>
              <div class="thought-tips" v-if="item.switch === 'main'">
                  <div class="thought-tips-workflow" v-if="item.workflow_name">
                      [{{`{ ${item.workflow_name} }`}}工作流转交对话] Agent 接管当前对话
                  </div>
              </div> -->
        <!-- <div class="thought-tips" v-if="item.switch === 'workflow'">
                  <div class="thought-tips-workflow">
                      {{`{${item.source_agent_name} `}}转交对话{{ '}' }}  {{`${item.target_agent_name}`}}Agent接管当前对话
                  </div>
              </div> -->
      </div>
    </div>
    <!-- title -->
    <!-- <div :class="isOpen ? 'thought-clps-title' : 'thought-clps-title-isOpen'" @click="toggleCollapse" >
          <img class="logo-split" src="@/assets/img/thought.svg" alt="split" />
          <span class="thought-clps-title-desc">展开思考过程</span>
          <span v-if="agentThought.is_workflow" >[Agent转交对话] {{agentThought.workflow_name}}工作流接管当前对话</span>
          <v-icon :remote="true" name="arrow_down_small_line" size="12" class="thought__header__icon"
                  :rotate="isOpen ? 180 : 0"></v-icon>
      </div> -->
  </div>
</template>

<script>
import { THOUGHT_STATUS } from "@/constants";
import { replaceLinks, formattedEllipsis } from "@/utils";
import Reference from "@/pages/chat/components/reference-component.vue";
import { isJSON, convertToCapitalizedCamelCase, isEmpty } from "@/utils/util";
import VueJsonPretty from "vue-json-pretty";
import msgCodeHeader from "@/mixins/msg-code-header";
import "vue-json-pretty/lib/styles.css";

export default {
  mixins: [msgCodeHeader],
  components: {
    Reference,
    VueJsonPretty,
  },
  data() {
    return {
      isOpen: true,
      THOUGHT_STATUS,
      popperList: [],
      oldPopDemo: null,
      isOpenDtl: [],
      notBindGlobalClick: true,
      isAgentPattern: false,
    };
  },
  directives: {
    blank: {
      inserted(el) {
        if (el.tagName === "A") {
          el.setAttribute("target", "_blank");
        }
      },
    },
  },
  props: {
    agentThought: {
      type: Object,
      default: null,
    },
    msgIndex: {
      type: Number,
      default: -1,
    },
    workspaceVisible: Boolean,
    // isOpen: {
    //     type: Boolean,
    //     default: true
    // }
  },
  computed: {
    isDeepSeekApp() {
      // deepseek官方app不展示图片 暂时这么处理
      let webimToken = window.webimToken[0];
      // console.log('isDeepSeekApp webimToken--------->', process.env.SERVER_ENV, '=======', webimToken.bot_biz_id, '=======', webimToken);
      if (process.env.SERVER_ENV === "prod") {
        return webimToken.bot_biz_id === "1887453086201675776";
      } else if (process.env.SERVER_ENV === "test") {
        return webimToken.bot_biz_id === "1887055767721213952";
      } else {
        return false;
      }
    },
    showThoughtClps() {
      return (
        this.agentThought &&
        this.agentThought.procedures &&
        this.agentThought.procedures.length > 0
      );
    },
    // 是否启用最新的工具执行样式
    enableWorkSpaceTitle() {
      if (
        !this.isMobile &&
        this.agentThought &&
        this.agentThought.procedures &&
        this.agentThought.procedures.length > 0
      ) {
        const hasDisplayStatusField = this.agentThought.procedures.findIndex(
          (item) =>
            item.debugging && (item.debugging.display_status || item.agent_icon)
        );
        return hasDisplayStatusField > -1;
      }
      return false;
    },
    // collapseHeaderClass () {
    //     // thought-clps__header
    //     return {
    //         'thought-clps__header': true,
    //         'headerOpen': this.isOpen,
    //         'headerClose': !this.isOpen
    //     };
    // }
    answerAgentName() {
      let name = "";
      if (
        this.agentThought &&
        this.agentThought.procedures &&
        this.agentThought.procedures.length > 0
      ) {
        for (let i = 0; i < this.agentThought.procedures.length; i++) {
          if (this.agentThought.procedures[i].target_agent_name) {
            name = this.agentThought.procedures[i].target_agent_name;
            break;
          }
        }
      }
      return name;
    },
    // workspaceIsOpen () {
    //     if (!this.isAgentPattern || this.isMobile) {
    //         return false;
    //     }
    //     if (this.agentThought && this.agentThought.procedures && this.agentThought.procedures.length > 0) {
    //         const procedures = this.agentThought.procedures;
    //         const procedureOfTool = procedures.find((item) => !filterToolNames.includes(item.name));
    //         if (procedureOfTool && procedureOfTool.debugging && procedureOfTool.debugging.display_status) {
    //             return true;
    //         }
    //     }
    //     return false;
    // }
  },
  methods: {
    replaceLinks,
    isEmpty,
    formattedEllipsis,
    isJSON,
    convertToCapitalizedCamelCase,
    collapseOperate(bool) {
      this.isOpen = bool;
    },
    onTriggerWorkSpace(data, procedureIndex) {
      if (data.debugging.display_status) {
        this.$emit("openWorkspace", this.msgIndex, procedureIndex);
      }
    },
    openBottomDrawer(isOpen, refer) {
      this.$emit("openBottomDrawer", isOpen, refer);
    },
    littleTagClick(e, r) {
      let name = r.split("@@")[0];
      // let id = r.split('@@')[1];

      const findMsg = this.agentThought.procedures.find(
        (el) => el.name === name
      );
      console.log(
        "【content】littleTagClick  2222221=======》",
        e,
        e.outerText,
        r,
        name,
        findMsg
      );

      let outerTextArr = e.outerText.split("");
      this.popperList = findMsg.debugging.references.filter((ell) =>
        outerTextArr.includes(ell.id.toString())
      );

      if (this.oldPopDemo) {
        this.$refs["littleTagPop"].unbindTrigger(this.oldPopDemo);
      }
      if (e) {
        this.$refs["littleTagPop"] &&
          this.$refs["littleTagPop"].bindTrigger(e, "manual");
        this.$refs["littleTagPop"] && this.$refs["littleTagPop"].update();
        this.$refs["littleTagPop"] && this.$refs["littleTagPop"].show();
        this.oldPopDemo = e;
      }
    },
    openSearchUrl(refer, index) {
      console.log("【reference】", refer, index);
      window.open(refer.url);
    },
    handleOutsideClick(event) {
      if (!this.oldPopDemo) {
        return;
      }
      const firstElement = document.getElementsByClassName("pop-demo")[0];
      console.log(
        "【clickoutside】===========>",
        event.target,
        this.oldPopDemo,
        firstElement
      );
      if (
        this.oldPopDemo.contains(event.target) ||
        firstElement.contains(event.target)
      ) {
      } else {
        if (this.oldPopDemo) {
          this.$refs["littleTagPop"] &&
            this.$refs["littleTagPop"].unbindTrigger(this.oldPopDemo);
        }
        // 调用你想要执行的方法
        this.$refs["littleTagPop"] && this.$refs["littleTagPop"].hide();
        this.oldPopDemo = null;
      }
    },
    // getShowType (item) {
    //     // 展示种类 md json lke
    //     if (item.name === 'thought') {
    //         return 'md';
    //     } else if (item.status === 'success') {
    //         // 在clientData处还有特殊处理
    //         if (item.debugging && item.debugging.display_type === 1) {
    //             return 'lke-reference';
    //         } else {
    //             return 'json';
    //         }
    //     } else {
    //         return 'json';
    //     }
    // },
    openRunNodes(m) {
      // 去掉子节点的展开和收起 https://tapd.woa.com/tapd_fe/70080800/story/detail/1070080800121725211
      // this.isOpenDtl[m.index] = !this.isOpenDtl[m.index];
      // this.isOpenDtl = Object.assign({}, this.isOpenDtl);
    },
    fixMarkdownOrderedList(mdText) {
      // 如果文本为空，则直接返回
      if (!mdText) return mdText;
      // 分割文本为行
      const lines = mdText.split("\n");

      // 遍历每一行
      for (let i = 0; i < lines.length; i++) {
        // 检查当前行是否是有序列表项
        if (/^\d+\.\s/.test(lines[i])) {
          // 检查下一行是否是错误的有序列表项
          if (lines[i + 1] && /^\d+\.\S/.test(lines[i + 1])) {
            // 在序号和点之间添加空格
            lines[i + 1] = lines[i + 1].replace(/(\d+)\.(\S)/, "$1. $2");
          }
        }
      }

      // 合并行为新的文本
      const fixedMdText = lines.join("\n");

      return this.xssHandlerProcess(fixedMdText);
    },
    toggleCollapse() {
      this.isOpen = !this.isOpen;
      // this.$emit('update:isOpen', !this.isOpen);
    },
    checkIsOpen(name) {
      // https://tapd.woa.com/tapd_fe/70080800/story/detail/1070080800121725211
      const pluginName = name ? name.toLocaleLowerCase() : "";
      if (pluginName) {
        if (this.enableWorkSpaceTitle) {
          // 只展示agent 的思考内容，插件输出内容都展示到workspace
          if (pluginName !== "thought") {
            return false;
          } else {
            return true;
          }
        } else {
          if (pluginName.indexOf("deepseek") > -1) {
            return false;
          }
          if (
            pluginName.includes("thought") ||
            pluginName.includes("search") ||
            pluginName.includes("knowledge") ||
            pluginName.includes("code") ||
            pluginName.includes("charts")
          ) {
            // 代码解释器展示代码，混元搜索和知识库问
            return true;
          }
        }
      }
      return false;
    },
  },
  watch: {
    agentThought: {
      handler(val, oldValue) {
        // console.log('【agentThought】', val);
        if (val && val.procedures && val.procedures.length > 0) {
          val.procedures.forEach((el) => {
            // 给每一个，增加一个展开收起的标识
            if (!this.isOpenDtl.hasOwnProperty(el.index)) {
              this.isOpenDtl[el.index] = this.checkIsOpen(el.name);
            } else {
              if (this.isOpenDtl[el.index] === undefined) {
                this.isOpenDtl[el.index] = this.checkIsOpen(el.name);
              }
            }
          });
        }

        if (val && val.status_summary === THOUGHT_STATUS.pending) {
          this.isCollapsed = true;
        } else {
          this.isCollapsed = false;
        }
        // console.log('000000000000tokens222', val, this.isOpenDtl);
      },
      immediate: true, // 立即触发handler函数
    },
  },
  created() {
    // console.log('【agentThought】1', this.agentThought);
    const webimToken = window.webimToken[0] || {};
    const isAgentPattern = webimToken.pattern && webimToken.pattern === "agent";
    this.isAgentPattern = isAgentPattern;
  },
  mounted() {
    // console.log('【agentThought】12', this.agentThought);
    document.addEventListener("click", this.handleOutsideClick);
    const sDom = document.querySelector(".client-chat");
    sDom.addEventListener("scroll", () => {
      this.$refs["littleTagPop"] && this.$refs["littleTagPop"].hide();
    });
  },
  beforeDestroy() {
    // 移除全局事件监听器
    document.removeEventListener("click", this.handleOutsideClick);
  },
};
</script>

<style lang="less" scoped>
div {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

.isShow {
  // border-radius: var(--radius-large);
}
.thought__header__icon {
}

//.thought-tips-workflow{
//}

.thought-clps.thought-clps-open {
  margin-bottom: 16px;
  // border: none;
  // background: transparent;
  // color: var(--color-text-caption);
  .thought-clps-title {
    padding: 0 0 0 0;
  }
}

.thought-clps {
  // background-color: #fff;
  // border-radius: var(--radius-large);
  // background: var(--color-bg-1);
  // border: 1px solid var(--border---color-border-normal, rgba(4, 34, 75, 0.13));
  &-modellabel {
    color: var(--color-text-caption);
    // font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }

  &-title {
    // background-color: #fff;
    color: var(--color-text-caption);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
    cursor: pointer;
    // padding: 12px 0 8px 0;
    padding: 0 0 0 0;

    display: flex;
    // padding: 12px 16px 0 16px;
    // height: 43px;
    // padding: 6px 24px;
    align-items: center;
    gap: var(--spacing-tight);

    // border-radius: var(--radius-0) var(--radius-0) var(--radius-large) var(--radius-large);
    // background: var(--color-gray-0);
    &-desc:hover {
      background: linear-gradient(
        90deg,
        #62c3ff -7.64%,
        #5b89ff 49.61%,
        #7978ff 100%
      );
      // background: linear-gradient(90deg, color(display-p3 0.4824 0.7569 1) -7.64%, color(display-p3 0.3961 0.5333 1) 49.61%, color(display-p3 0.4745 0.4706 1) 100%);
      background-clip: text;
      color: transparent;
    }
  }
  .thought-clps-title-isOpen {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    gap: var(--spacing-tight);
    width: fit-content;
    border-radius: var(--radius-large);
    border: var(--border-thickness) solid var(--color-border-normal);
    background: var(--color-bg-1);
  }

  // &-title:hover {
  //     background: linear-gradient(90deg, #62C3FF -7.64%, #5B89FF 49.61%, #7978FF 100%);
  //     // background: linear-gradient(90deg, color(display-p3 0.4824 0.7569 1) -7.64%, color(display-p3 0.3961 0.5333 1) 49.61%, color(display-p3 0.4745 0.4706 1) 100%);
  //     background-clip: text;
  //     color: transparent;
  // }

  &-content {
    // background-color: aquamarine;
    display: flex;
    // padding: var(--spacing-base-loose);
    // padding: var(--spacing-base-loose) 24px;
    flex-direction: column;
    // align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-left: 1px solid var(--color-border-normal);
    margin: var(--spacing-base-loose) 0 var(--spacing-base) 0;
    padding: 0 12px 0 12px;
    // margin-top: 12px;
    // border-radius: var(--radius-large);
    // background: var(--color-bg-0);

    .thought-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      // background-color: antiquewhite;
      // cursor: pointer;

      .thought-title-container {
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .thought-title-icon {
        display: flex;
        width: 16px;
        height: 16px;
        flex-direction: column;
        justify-content: center;
        border-radius: 8px;
        margin-right: 4px;
      }
      .agent-title-icon {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }

      .thought-title-name {
        color: var(--color-text-primary);
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        display: inline-block;
      }

      .thought-title-elapsed {
        color: var(--color-text-caption);
        font-family: Monaco;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
    }
    .thought-new-title {
      display: block;
      .thought-tool-inner {
        display: flex;
        align-items: center;
      }
      .thought-agent-name {
        font-weight: 600;
      }
      .thought-tool-container {
        // padding: 3px 8px;
        gap: 4px;
        line-height: 24px;
        height: 24px;
        position: relative;
        cursor: pointer;
        &.disabled {
          cursor: not-allowed;
        }
        .thought-tool-inner {
          padding: 0 8px;
          position: absolute;
          max-width: 100%;
          border: 1px solid rgba(0, 0, 0, 0.08);
          background: var(--color-bg-contrast);
          border-radius: 20px;
        }
        .thought-title-name {
          font-size: 12px;
          font-weight: 400;
          color: var(--color-text-secondary);
          display: inline-block;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .workspace-active .thought-title-name {
          max-width: 80%;
        }
        .thought-line {
          margin: 0 4px;
          color: var(--color-text-caption);
          transform: translateY(-1px);
        }
        .thought-agent-name {
          display: none;
        }
        .thought-title-elapsed span {
          display: none;
        }
      }
      .thought-agent-container {
        .thought-line {
          display: none;
        }
        .thought-title-name {
          display: none;
        }
      }
    }

    .thought-detail {
      // background-color: peru;
      display: flex;
      // padding: var(--spacing-base) 12px;
      // padding: 8px 0;
      // justify-content: center;
      // align-items: center;
      gap: 10px;
      // align-self: stretch;

      // margin-top: 5px;
      // border-radius: var(--radius-normal);
      // border-bottom:  0.5px solid var(--color-divider-normal);
      // background: #F7F8FA;
      // background: color(display-p3 0.9686 0.9725 0.9804);

      /* caption/--caption-regular */
      // font-family: var(--font-family-normal);

      color: var(--color-text-secondary);
      /* body/--body-regular */
      // font-family: var(--font-family-normal);
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px; /* 142.857% */

      /* 133.333% */
      /deep/ p {
        word-break: break-all;
        word-wrap: break-word;
        // background: pink;
        margin: 0;
      }
      &.last-item {
        border-bottom: 1.5px solid var(--color-gray-4);
      }

      /deep/ code {
        overflow: overlay;
        &::-webkit-scrollbar {
          background: transparent;
          width: 5px;
          height: 8px;
        }
        /* 滚动条轨道 */
        &::-webkit-scrollbar-track {
          background: transparent;
          width: 0px;
        }

        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          // background: rgba(17, 32, 70, 0.13);
          background-color: #eee;
        }
      }
    }
    .thought-tips {
      // background-color: pink;
      display: flex;
      padding: var(--spacing-base-loose) 10px 4px 10px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
      align-self: stretch;
      &-workflow {
        // background-color: purple;
        display: flex;
        padding: 3px 12px;
        align-items: flex-start;
        gap: 10px;

        border-radius: 20px;
        background: #f3f5fb;
        // background: color(display-p3 0.9529 0.9608 0.9804);

        color: var(
          --gray---color-gray-5,
          var(--global-color-gray---color-gray-5, #b2b8c6)
        );
        // color: var(--gray---color-gray-5, var(--global-color-gray---color-gray-5, color(display-p3 0.7059 0.7216 0.7686)));
        // font-family: "PingFang SC";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
    }
  }
}
</style>
